<template>
  <div class="container">
    <div class="flex-item">
      <div style="width: 100%; height: 100%" ref="eachartsall"></div>
    </div>
    <div class="flex-item">
      <div style="width: 100%; height: 100%" ref="chartDom"></div>
    </div>
  </div>
</template>
    
  <script>
import * as echarts from "echarts";
import { itemPieChar, propertyPieChar } from "@/api/index.js";
import { mapState } from "vuex";
export default {
  name: "HelloWorld",
  data() {
    return {
      option: {
        grid: {
          left: "10%", // 调整左边距
          right: "10%", // 调整右边距
          top: "10%", // 调整上边距
          bottom: "10%", // 调整下边距
        },
        title: {
          text: "耗材总数统计",
          left: "left", // 设置标题居左
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left", // 调整图例位置，使其在标题下面
          top: "10%", // 居中显示
          textStyle: {
            color: "skyblue",
          },
        },
        series: [
          {
            name: "耗材总数统计",
            type: "pie",
            radius: "40%",
            center: ["50%", "60%"],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      option1: {
        grid: {
          left: "10%", // 调整左边距
          right: "10%", // 调整右边距
          top: "10%", // 调整上边距
          bottom: "10%", // 调整下边距
        },
        title: {
          text: "资产总数统计",
          left: "left",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
          top: "10%", // 居中显示
          textStyle: {
            color: "skyblue", // 修改为你想要的颜色
          },
        },
        series: [
          {
            name: "资产总数统计",
            type: "pie",
            radius: "40%",
            center: ["50%", "60%"],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      tableData: [],
      wareHouseId: null,
    };
  },
  computed: {
    ...mapState(["itemPieChar", "propertyPieChar"]),
  },
  mounted() {
    this.wareHouseId =
      localStorage.getItem("setmywarehouseId") ||
      JSON.parse(localStorage.getItem("Warehouse"))[0].id;
    this.daclick();
    this.drawEcharts();
    this.initmyEcharts();
  },
  methods: {
    dds() {
      console.log(this.$store.state.itemPieChar);
      console.log(this.$store.state.propertyPieChar);
    },
    drawEcharts() {
      // 第三步，通过echarts的init方法实例化一个echarts对象myChart，并，保存在data变量中
      this.myChart = echarts.init(this.$refs.chartDom);
      // 第四步，执行myChart的setOption方法去画图，当然至于配置项，我们要提前配置好，这里的配置项
      //         写在data中，方便我们在一些事件中去修改对应配置项，比如点击按钮更改配置项数据
      this.myChart.setOption(this.option);
      // 第五步，在页面初始化加载的时候绑定页面resize事件监听。补充resize事件：resize事件是在浏览器窗口大小改变时，会触发。
      //        如当用户调整窗口大小，或者最大化、最小化、恢复窗口大小显示时触发 resize 事件。
      //        我们一般使用这个事件去做窗口大小与对应元素的大小适配
      window.addEventListener("resize", () => {
        // 第六步，执行echarts自带的resize方法，即可做到让echarts图表自适应
        this.myChart.resize();
        // 如果有多个echarts，就在这里执行多个echarts实例的resize方法,不过一般要做组件化开发，即一个.vue文件只会放置一个echarts实例
        /*
        this.myChart2.resize();
        this.myChart3.resize();
        ......
        */
      });
    },
    initmyEcharts() {
      this.myChart = echarts.init(this.$refs.eachartsall);
      this.myChart.setOption(this.option1);
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
    daclick() {
      // 耗材   this.option.series[0].data  this.option1.series[0].data
      if (this.$store.state.itemPieChar) {
        this.option.series[0].data = this.$store.state.itemPieChar;
      } else {
        itemPieChar({ warehouseId: this.wareHouseId }).then((responce) => {
          console.log(responce.data, "首次耗材饼图");
          this.option.series[0].data = responce.data;
        });
      }
      // 资产
      if (this.$store.state.propertyPieChar) {
        this.option1.series[0].data = this.$store.state.itemPieChar;
      } else {
        propertyPieChar({ warehouseId: this.wareHouseId }).then((responce) => {
          console.log(responce.data, "首次资产饼图");
          this.option1.series[0].data = responce.data;
        });
      }
    },
  },
  watch: {
    // 监听 chartOptions 的变化
    option1: {
      handler(newData) {
        // 数据变化后，重新绘制图表
        this.initmyEcharts();
      },
      deep: true, // 开启深度监听，以便监听数组和对象的变化
    },
    option: {
      handler(newData) {
        // 数据变化后，重新绘制图表
        this.drawEcharts();
      },
      deep: true, // 开启深度监听，以便监听数组和对象的变化
    },
  },
  beforeDestroy() {
    /* 页面组件销毁的时候，别忘了移除绑定的监听resize事件，否则的话，多渲染几次
      容易导致内存泄漏和额外CPU或GPU占用哦 */
    window.removeEventListener("resize", () => {
      this.myChart.resize();
    });
  },
};
</script>
    
  <style lang="scss" scoped>
.dds {
  width: 100%;
}
.container {
  display: flex;
  flex-direction: column; /* 设置垂直主轴方向 */
  align-items: center; /* 顶部对齐 */
  width: 100%;
  height: 100%;
}
.tableclass {
  margin: 1rem;
  width: 100%;
  color: white;
  flex: 1;
}
.mytabelflex {
  border: 2px solid white;
  margin: 0 auto;
  width: 100%;
  max-height: 13rem;
  overflow: auto;
  height: 30rem;
}
.mybody {
  width: 100%;
}
.spanmvc {
  flex: 1;
  color: white;
  font-size: 1rem;
}
.mybody tr {
  width: 90%;
  display: flex;
  padding: 10px;
  border: 1px solid skyblue;
  margin: 10px;
}
.flex-item {
  width: 100%;
  height: 100%;
  max-width: 2000px; /* 子项目最大宽度，可以根据需要调整 */
  max-height: 800px; /* 子项目最大高度，可以根据需要调整 */
}

.list-style {
  height: 10rem;
}
</style>
    